<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
  },
}
</route>
<template>
  <view class="entire">
    <!--    背景图片-->
    <view style="z-index: -10; height: 2200rpx; overflow-y: hidden; position: absolute">
      <image style="width: 100vw; height: 3200rpx" :src="indexBg"></image>
    </view>
    <!--    搜索导航栏-->
    <view class="search">
      <image
        style="width: 60rpx; height: 60rpx; margin-top: 55rpx"
        src="/static/images/icons/icon_more.png"
        @click="pageData.showMorePop = true"
      ></image>
      <SearchBar class="search-input"></SearchBar>
      <image
        style="width: 50rpx; height: 50rpx; margin-top: 60rpx"
        src="/static/images/icons/icon_ring.png"
        @click="nav(3)"
      ></image>
      <view class="dot">.</view>
    </view>
    <!--    logo-->
    <view class="brand">
      <view class="title1">格知汇</view>
      <view class="title2">Grundfos Academy China Club</view>
    </view>
    <!--    轮播图-->
    <view class="ad">
      <swiper
        :indicator-dots="true"
        indicator-active-color="#1b5b93"
        style="height: 350rpx"
        circular
        :autoplay="true"
        :duration="1000"
      >
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image
            @click="handleSwiperClick(item)"
            :src="item.banner"
            style="width: 700rpx; height: 350rpx; border-radius: 25rpx"
          ></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="menu1">
      <wd-grid bg-color="#FFFFFF00">
        <view @click="nav(6)">
          <wd-grid-item use-icon-slot use-text-slot>
            <template #icon>
              <image class="slot-img" :src="iconInfo" />
            </template>
            <template #text>
              <view class="slot-text">我的任务</view>
            </template>
          </wd-grid-item>
        </view>
        <view @click="nav(4)">
          <wd-grid-item use-icon-slot use-text-slot>
            <template #icon>
              <image class="slot-img" :src="iconAchievement" />
            </template>
            <template #text>
              <view class="slot-text">我的成就</view>
            </template>
          </wd-grid-item>
        </view>
        <view @click="nav(7)">
          <wd-grid-item use-icon-slot use-text-slot>
            <template #icon>
              <image class="slot-img" :src="iconTrain" />
            </template>
            <template #text>
              <view class="slot-text">我的收藏</view>
            </template>
          </wd-grid-item>
        </view>
        <view @click="nav(8)">
          <wd-grid-item use-icon-slot use-text-slot>
            <template #icon>
              <image class="slot-img" :src="iconNews" />
            </template>
            <template #text>
              <view class="slot-text">新闻动态</view>
            </template>
          </wd-grid-item>
        </view>
      </wd-grid>
    </view>
    <view class="horizontal-divider"></view>
    <view class="menu2">
      <GzIndexNavBox></GzIndexNavBox>
    </view>
    <view class="menu3">
      <view class="menu-item" @click="nav(25)">
        <image class="slot-img" :src="bottomMenu1" />
        <view class="slot-text">基础培训</view>
      </view>
      <view class="menu-item" @click="nav(2)">
        <image class="slot-img" :src="bottomMenu2" />
        <view class="slot-text">经销商业务平台入口</view>
      </view>
      <view class="menu-item" @click="nav(1)">
        <image class="slot-img" :src="bottomMenu3" />
        <view class="slot-text">格兰富中国产品中心</view>
      </view>
      <view class="menu-item" @click="nav(26)">
        <image class="slot-img" :src="bottomMenu4" />
        <view class="slot-text">知汇学堂</view>
      </view>
    </view>
    <!--    资料快捷入口-->
    <view class="menu-title-list">
      <view class="menu-title" @click="nav(20)">
        <view class="menu-title-left">直播课程</view>
        <view class="menu-title-right">More &gt;</view>
      </view>
      <view class="horizontal-divider"></view>
      <view class="menu-list-hor">
        <view style="margin-top: -30rpx">
          <LiveCourseItem v-if="pageData.liveCourse" :course="pageData.liveCourse" />
        </view>
      </view>
    </view>
    <view class="menu-title-list">
      <view class="menu-title" @click="nav(21)">
        <view class="menu-title-left">热门课程</view>
        <view class="menu-title-right">More &gt;</view>
      </view>
      <view class="horizontal-divider"></view>
      <view class="menu-list-grid">
        <view
          :key="index"
          v-for="(item, index) in pageData.courseList"
          @click="navToCourseInfo(item)"
        >
          <LearnTabCardBig v-if="index < 4" :title="item.title" :picture="item.picture" />
        </view>
      </view>
    </view>
    <view class="menu-title-list">
      <view class="menu-title" @click="nav(22)">
        <view class="menu-title-left">热门知识</view>
        <view class="menu-title-right">More &gt;</view>
      </view>
      <view class="horizontal-divider"></view>
      <view class="menu-list-hor">
        <view
          @click="navToRichText(item)"
          :key="index"
          v-for="(item, index) in pageData.knowledgeList"
        >
          <LearnTabCard :title="item.title" :picture="item.picture" />
        </view>
      </view>
    </view>
    <view class="menu-title-list">
      <view class="menu-title" @click="nav(23)">
        <view class="menu-title-left">培训专题</view>
        <view class="menu-title-right">More &gt;</view>
      </view>
      <view class="horizontal-divider"></view>
      <view class="menu-list-hor">
        <view
          @click="navToTopicInfo(item)"
          :key="index"
          v-for="(item, index) in pageData.trainList"
        >
          <LearnTabCard :title="item.title" :picture="item.picture" />
        </view>
      </view>
    </view>
    <view style="height: 150rpx"></view>
    <GzTabbar :active="0" />
    <!--    左侧更多弹出层-->
    <wd-popup
      v-model="pageData.showMorePop"
      position="left"
      custom-style="width:550rpx;height:100vh;z-index:999"
    >
      <view class="popup">
        <image
          style="z-index: -10; position: fixed; top: -145rpx; width: 550rpx; height: 120vh"
          :src="popopBg"
        />
        <view style="margin-top: 300rpx">
          <view @click="nav(23)">
            <wd-cell custom-class="cell-class">
              <template #title>
                <view style="display: flex; align-items: center; width: 300rpx">
                  <image style="width: 55rpx; height: 55rpx" :src="iconTrainMenu" />
                  <view style="display: inline-block; margin-left: 20rpx">培训</view>
                </view>
              </template>
              <wd-icon name="chevron-right" size="22px" color="#fff" />
            </wd-cell>
          </view>
          <view @click="nav(24)">
            <wd-cell custom-class="cell-class">
              <template #title>
                <view style="display: flex; align-items: center; width: 300rpx">
                  <image style="width: 55rpx; height: 55rpx" :src="iconExamMenu" />
                  <view style="display: inline-block; margin-left: 20rpx">考试</view>
                </view>
              </template>
              <wd-icon name="chevron-right" size="22px" color="#fff" />
            </wd-cell>
          </view>
          <view @click="nav(5)">
            <wd-cell custom-class="cell-class">
              <template #title>
                <view style="display: flex; align-items: center; width: 300rpx">
                  <image style="width: 55rpx; height: 55rpx" :src="iconNoticeMenu" />
                  <view style="display: inline-block; margin-left: 20rpx">公告</view>
                </view>
              </template>
              <wd-icon name="chevron-right" size="22px" color="#fff" />
            </wd-cell>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>
<script setup>
import SearchBar from '@/components/SearchBar/SearchBar.vue'
import { API } from '@/service'
import { getMixedResourceList, getTopCourseList } from '@/service/mixedResource/mixedResource'
import { getExpertiseList } from '@/service/expertise/expertise'
import { getHotSpecialTrainList } from '@/service/specialTrain/specialTrain'
import { getHotLiveList } from '@/service/live/live'
import LearnTabCardBig from '@/components/LearnTabCard/LearnTabCardBig.vue'
import LearnTabCard from '@/components/LearnTabCard/LearnTabCard.vue'
import {
  bottomMenu1,
  bottomMenu2,
  bottomMenu3,
  bottomMenu4,
  indexBg,
  popopBg,
} from '@/static/imgMap'
import { useUserStore } from '@/store'
import {
  iconAchievement,
  iconExamMenu,
  iconInfo,
  iconNews,
  iconNoticeMenu,
  iconTrain,
  iconTrainMenu,
} from '@/static/iconsMap'

const pageData = reactive({
  showMorePop: false,
  liveList: [],
  courseList: [],
  knowledgeList: [],
  trainList: [],
  liveCourse: null,
})
const switcH = () => {
  uni.switchTab({ url: '/pages/courseCenter/courseCenter' })
}
const nav = (page, item) => {
  if (page === 0) {
    uni.navigateTo({
      url: '/pages-sub/searchPage/searchPage',
    })
  } else if (page === 1) {
    uni.navigateTo({ url: '/pages-sub/productCenter/productCenter' })
  } else if (page === 2) {
    // uni.navigateTo({
    //   url: '/pages-sub/webview/webviewDealer',
    // })
    // todo 跳转经销商业务平台
    uni.navigateToMiniProgram({
      appId: 'wx1ce620a391c51dc0',
      path: '',
      extraData: null,
      success(res) {
        // 打开成功
      },
    })
  } else if (page === 3) {
    uni.navigateTo({
      url: '/pages-sub/myMessage/myMessage',
    })
  } else if (page === 4) {
    uni.navigateTo({
      url: '/pages-sub/myCertificate/myCertificate',
    })
  } else if (page === 5) {
    uni.navigateTo({
      url: '/pages-sub/notice/notice',
    })
  } else if (page === 6) {
    uni.switchTab({
      url: '/pages/myMission/myMission',
    })
  } else if (page === 7) {
    uni.navigateTo({
      url: '/pages-sub/myCollect/myCollect',
    })
  } else if (page === 8) {
    uni.navigateTo({
      url: '/pages-sub/myNews/myNews',
    })
  } else if (page === 20) {
    uni.navigateTo({
      url: '/pages-sub/liveCourse/liveCourse',
    })
  } else if (page === 21) {
    uni.navigateTo({
      url: '/pages-sub/hotCourse/hotCourse',
    })
  } else if (page === 22) {
    uni.navigateTo({
      url: '/pages-sub/hotKnowledge/hotKnowledge',
    })
  } else if (page === 23) {
    uni.navigateTo({
      url: '/pages-sub/trainTopic/trainTopic',
    })
  } else if (page === 24) {
    uni.navigateTo({
      url: '/pages-sub/exam/exam',
    })
  } else if (page === 25) {
    uni.navigateTo({
      url: '/pages-sub/myCertificate/fundCertificated',
    })
  } else if (page === 26) {
    uni.showModal({
      title: '',
      content: '该模块正在开发中...',
      confirmColor: '#60d970',
      showCancel: false,
      buttonText: '知道了',
      success: function (res) {},
    })
  }
}
const navToTopicInfo = (data) => {
  uni.navigateTo({
    url: '/pages-sub/trainTopic/trainTopicInfo?data=' + encodeURIComponent(JSON.stringify(data)),
  })
}

// 轮播图相关
const swiperList = ref([])

function handleSwiperClick(e) {
  console.log(e)
  // 0:在线课程;;4:在线考试;6:活动;9:公告
  if (e.cateId === 0) {
    navToCourseInfo({
      resId: e.resId,
    })
  } else if (e.cateId === 4) {
    uni.navigateTo({
      url: `/pages-sub/exam/examRoom/examRoomDoor?id=${e.resId}`,
    })
  } else if (e.cateId === 6) {
    // 三种情况
    // 1.webUrl:https://www.baidu.com
    // 2.wxUrl:{'appld':'wx89usd9dfgu', 'path':",'extraData':"}
    // 3.localUrl: {'path': '/page/path', 'data': {'id': 1}}
    if (e.url.includes('webUrl')) {
      // 打开网页 截取:后面的网址
      const url = e.url.substring(e.url.indexOf(':') + 1).trim()
      console.log(url)
      uni.navigateTo({
        url: '/pages-sub/webview/webview?url=' + encodeURIComponent(url),
      })
    } else if (e.url.includes('wxUrl')) {
      // 打开小程序 截取:后面的json字符串 解析字段
      const jsonStr = e.url.substring(e.url.indexOf(':') + 1).trim()
      console.log(jsonStr)
      const wxUrl = JSON.parse(jsonStr)
      console.log(wxUrl)
      uni.navigateToMiniProgram({
        appId: wxUrl.appId,
        path: wxUrl.path || '',
        extraData: wxUrl.extraData || null,
        success(res) {
          // 打开成功
        },
      })
    } else if (e.url.includes('localUrl')) {
      // 打开本地页面 截取:后面的json字符串 解析字段
      const jsonStr = e.url.substring(e.url.indexOf(':') + 1).trim()
      console.log(jsonStr)
      const localUrl = JSON.parse(jsonStr)
      console.log(localUrl)
      uni.navigateTo({
        url:
          localUrl.path +
          (localUrl.data ? '?data=' + encodeURIComponent(JSON.stringify(localUrl.data)) : ''),
      })
    }
  } else if (e.cateId === 9) {
    uni.navigateTo({
      url:
        '/pages-sub/notice/noticeRichText?data=' +
        encodeURIComponent(JSON.stringify({ id: e.resId })),
    })
  }
}

onMounted(async () => {
  // todo 上传前记得关掉注释 定时调用在线
  setInterval(() => {
    if (
      useUserStore().userInfo.logId != null &&
      useUserStore().userInfo.logId !== '' &&
      useUserStore().userInfo.logId !== undefined
    ) {
      API.user.online(useUserStore().userInfo.logId).catch({
        error: (err) => {
          console.error('Error updating online status:', err)
        },
      })
    }
  }, 5000)
  API.banner.getBannerList().then((res) => {
    swiperList.value = res.data.items.map((item) => ({
      banner: item.bannerimage,
      cateId: item.bannercateId,
      resId: item.bannertitleId,
      url: item.mini_Url,
    }))
    console.log(swiperList)
  })
  try {
    // 获取热门直播列表
    const liveResponse = await getHotLiveList()
    if (liveResponse.data.items.length > 0) {
      liveResponse.data.items.forEach((item) => {
        if (item.runStatus !== 2) {
          pageData.liveCourse = item
        }
      })
    }
    // pageData.liveList = liveResponse.data.items.map((item) => ({
    //   title: item.liveName,
    //   picture: item.frontImage,
    //   liveId: item.liveId,
    //   startTime: item.startTimeStr,
    //   status: item.statusStr,
    // }))

    const courseResponse = await getTopCourseList(4)
    pageData.courseList = courseResponse.data.items.map((item) => ({
      resId: item.resId,
      title: item.resName,
      picture: item.resImg,
      lookNum: item.lookNum,
      isCollect: item.isCollect,
      isLike: item.isLike,
      resImg: item.resImg,
      resName: item.resName,
    }))

    const expertiseResponse = await getExpertiseList({ limit: 4, page: 1 })
    pageData.knowledgeList = expertiseResponse.data.items.map((item) => ({
      id: item.id,
      title: item.title,
      content: item.content,
      picture: item.frontImg,
    }))

    const trainResponse = await getHotSpecialTrainList()
    pageData.trainList = trainResponse.data.map((item) => ({
      specialId: item.specialId,
      title: item.specialName,
      picture: item.frontImage,
    }))
  } catch (error) {
    console.error('Error fetching courses:', error)
  }
})
// 跳转课程详情
const navToRichText = (data) => {
  console.log(data)
  uni.navigateTo({
    url:
      '/pages-sub/knowledgeRichText/knowledgeRichText?data=' +
      encodeURIComponent(JSON.stringify(data)),
  })
}

const navToCourseInfo = (item) => {
  console.log(item)
  uni.navigateTo({
    url:
      '/pages/courseCenter/CourseInfo/CourseInfo?data=' + encodeURIComponent(JSON.stringify(item)),
  })
}
</script>
<style lang="scss">
.entire {
  overflow-x: hidden;
  width: 100%;

  .search {
    width: 100%;
    display: flex;
    height: 120rpx;
    background-color: rgba(115, 188, 246, 0);
    padding-left: 20rpx;
    padding-right: 20rpx;

    .search-input {
      margin-top: 50rpx;
      margin-left: 30rpx;
      margin-right: 30rpx;
    }

    .dot {
      font-size: 100rpx;
      margin-top: -40rpx;
      margin-left: -12rpx;
      color: red;
    }
  }

  .horizontal-divider {
    width: 94%;
    height: 1rpx;
    margin-left: 3%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(25, 118, 199, 0.3) 10%,
      rgba(25, 118, 199, 0.3) 50%,
      rgba(25, 118, 199, 0.3) 90%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .brand {
    margin-top: 20rpx;

    .title1 {
      display: flex;
      justify-content: center;
      width: 100%;
      font-size: 40rpx;
      color: #395f8b;
    }

    .title2 {
      display: flex;
      justify-content: center;
      width: 100%;
      color: #395f8b;
    }
  }

  .ad {
    margin-top: 40rpx;
    width: 700rpx;
    height: 350rpx;
    margin-left: 25rpx;
  }

  .menu1 {
    margin-top: 30rpx;
    width: 100%;

    .slot-img {
      height: 60rpx;
      width: 50rpx;
    }

    .slot-text {
      color: #a1a1a1;
      margin-top: 30rpx;
    }
  }

  .menu2 {
    margin-top: 40rpx;
    width: 700rpx;
    margin-left: 25rpx;
    display: flex;
    justify-content: space-between;
  }

  .menu3 {
    margin-top: 30rpx;
    width: 690rpx;
    margin-left: 30rpx;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: space-between;

    .menu-item {
      display: flex;
      width: 140rpx;
      flex-direction: column;
      align-items: center;

      .slot-img {
        height: 140rpx;
        width: 140rpx;
      }

      .slot-text {
        color: #a1a1a1;
        margin-top: 10rpx;
        font-size: 25rpx;
      }
    }
  }

  .menu-title-list {
    width: 100%;
    margin-top: 20rpx;
    margin-bottom: 10rpx;

    .menu-title {
      width: 700rpx;
      margin-right: 25rpx;
      margin-left: 25rpx;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10rpx;

      .menu-title-left {
        font-size: large;
        font-weight: bold;
      }

      .menu-title-right {
        color: #a1a1a1;
        font-size: 25rpx;
      }
    }

    .menu-list-hor {
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;
      margin-top: 20rpx;
      width: 750rpx;
    }

    .menu-list-grid {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10rpx;
      width: 750rpx;
      height: 400rpx;
    }
  }

  .popup {
    .cell-class {
      background-color: rgba(27, 91, 147, 0);
      color: white;
    }
  }
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}
</style>
